<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
	  lang="en">
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<meta name="viewport" content="initial-scale=1">
		<link rel="stylesheet" type="text/css" th:href="@{boot/css/bootstrap.min.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{boot/css/bootstrap-theme.min.css}" />
		<script th:src="@{js/jquery-3.5.1.min.js}"></script>
		<script th:src="@{boot/js/bootstrap.min.js}"></script>
		<script type="text/javascript">
			function SendEmil() {
				$("#btn_send").attr("disabled", "disabled");
				var submitButtonText = "重发";
				var second = 60;
				var intervalObj = setInterval(function () {
					$("#btn_send").text(submitButtonText + "(" + second + ")");
					if (second == 0) {
						$("#btn_send").text(submitButtonText);
						$("#btn_send").removeAttr("disabled");//将按钮可用
						/* 清除已设置的setInterval对象 */
						clearInterval(intervalObj);
					}
					second--;
				}, 1000);
				$.ajax({
					url: "/sendAdminEmil"
					, type: 'get'
					, async: true
					, data: {
						emil: $("#emil").val()
					}
					, success: function (res) {
						if (res === '0') {
							$("#msg").html("邮件发送不成功，请重试");
						} else {
							$("#msg").html(res);
						}
					}
				});
			}

			function resigned() {
				var isok = false;
				$.ajax({
					url: "/withResiger"
					, type: 'get'
					, async: false
					, data: {
						phone: $("#phone").val()
						, number: $("#number").val()
						, pwd: $("#pwd1").val()
						, pwd2: $("#pwd2").val()
						, name: $("#name").val()
						, emil: $("#emil").val()
						, emilRes: $("#emilRes").val()
					}

						, success: function (res) {
							$("#msg").html(res);
							if(res==='ok'){
								isok=true;
							}
						}
					});

					if (isok) {
						return true;
					} else {
						return false;
					}
				}
		</script>
	</head>
	<body background="img/bg.jpg" style="background-size: 1880px;">
	<div class="container">
		<div class="">
			<div style="height:0px;padding-bottom:13%">
			</div>
			<div class="row">
				<div class="col-lg-4 col-lg-offset-4 row  col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3"
					 style="border: 1px solid #bbfffa;border-radius: 15px;backdrop-filter: blur(19px);">
					<form th:action="@{/login}" method="post">
						<h2 align="center" style="color: #bdffdc;">Welcome !</h2>
						<br>
						<p class="text-danger" align="center" th:text="${msg}"></p>
							<div class="col-lg-10 col-lg-offset-1">
								<label class="container-fluid">
									<h4 style="color: #bdffdc;">
										账 号
										<span class="small">(手机号/邮箱)</span>
									</h4>
								</label>
								<input class="form-control"  type="text" name="nums"/>
								<label class="container-fluid">
									<h4 style="color: #bdffdc;">
										密 码
										<span class="small">(必填)</span>	
									</h4>
								</label>
								<input class="form-control"  type="password" name="pwd"/>
								<br>
								<div class="row">
									<div class="col-lg-4 col-lg-offset-1  col-xs-4 col-xs-offset-1">
										<button style="width: 80px;" class="btn btn-success " type="button"
												data-toggle="modal" data-target="#myModal">注册
										</button>
									</div>
									<div class="col-lg-4  col-lg-offset-1  col-xs-4 col-xs-offset-1">
										<input class="btn btn-info " type="submit" value="登录" style="width: 80px;"/>
									</div>
								</div>
								<br>
								<div>
									<span style="text-align: center"><a href="toHeloPage">找回密码/申请解封</a></span>
								</div>
								<br>
							</div>
						</form>
					</div>
				</div>
				
			</div>
		</div>	
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">注册信息</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" action="/resiger" method="get" onsubmit="return resigned()">
							<span class="text-info col-lg-4 col-lg-offset-4 col-xs-4 col-xs-offset-4"
								  id="msg">&nbsp;</span>
							<br>
							<div class="form-group">
								<label class="col-lg-2 col-xs-2 control-label">手机号</label>
								<div class="col-lg-8 col-xs-8">
									<input type="text" id="phone" name="phone" class="form-control"
										   placeholder="个人联系方式"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 col-xs-2 control-label">邮箱</label>
								<div class="col-lg-8 col-xs-8">
									<input type="text" id="emil" name="emil" class="form-control"
										   placeholder="个人邮箱地址"/>
								</div>
								<button id="btn_send" onclick="SendEmil()">发送</button>
							</div>
							<div class="form-group">
								<label class="col-lg-2 col-xs-2 control-label">用户名</label>
								<div class="col-lg-8 col-xs-8">
									<input type="text" id="number" name="number" class="form-control"
										   placeholder="由字母和数字组成"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 col-xs-2 control-label">密码</label>
								<div class="col-lg-8 col-xs-8">
									<input type="password" id="pwd1" name="pwd" class="form-control"
										   placeholder="3~12位的数字字母下划线"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 col-xs-2 control-label">重复密码</label>
								<div class="col-lg-8 col-xs-8">
									<input type="password" id="pwd2" name="pwd2" class="form-control"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 col-xs-2 control-label">昵称</label>
								<div class="col-lg-8 col-xs-8">
									<input type="text" id="name" name="name" class="form-control"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 col-xs-2 control-label">验证码</label>
								<div class="col-lg-8 col-xs-8">
									<input type="text" id="emilRes" name="emilRes" class="form-control"/>
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								<input type="submit" class="btn btn-primary" value="提交更改"/>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		
	</body>
</html>
